{% extends "templates/base.html" %}
{% block head %} {{ super() }}{% endblock %}
{% block header %}
{{ page_title(id="home", title="OYPAA 2013 Online Registration") }}
	{% block content %}
	<div class="well well-large span10 offset2">
		<div class="row hero">
			<h3>Instructions</h3>
			<p>Enter your registration information here. We are now in the early registration period. Pre-Registration costs at this time are $10.00</p>
		</div>
		<div class="row">
			<form id="form" action="/start_registration" method="post">
				<div class="registration_form" style="text-align:center;" data-role="fieldcontain">
		           <label class="ui-hidden-accessible" for="first_name">First Name:</label><input data-mini="true" type="text" id="first_name" name="first_name" value="" placeholder="First Name" required><br>
		           <label class="ui-hidden-accessible" for="last_name">Last Name:</label><input data-mini="true" type="text" id="last_name" name="last_name" value="" placeholder="Last Name" required><br>
		           <label class="ui-hidden-accessible" for="street_address">Street Address:</label><input data-mini="true" type="text" id="street_address" name="street_address" value="" placeholder="Street Address" required><br>
		           <label class="ui-hidden-accessible" for="city">City:</label><input data-mini="true" type="text" id="city" name="city" value="" placeholder="City" required><br>
		           <label class="ui-hidden-accessible" for="state">State:</label><input data-mini="true" type="text" id="state" name="state" value="" placeholder="State" required><br>
		           <label class="ui-hidden-accessible" for="zip_code">Zip Code:</label><input data-mini="true" type="text" id="zip_code" name="zip_code" value="" placeholder="Zip Code" required><br>
		           <label class="ui-hidden-accessible" for="email">Email:</label><input data-mini="true" type="email" id="email" name="email" value="" placeholder="Email" type="email" required><br>
		           <label class="ui-hidden-accessible" for="phone_number">Phone Number:</label><input data-mini="true" type="text" id="phone_number" name="phone_number" value="" placeholder="Phone Number" required><br>
				</div>
				<div class="registration_from" style="text-align:center;" data-role="fieldcontain">
				    <button id="submit_button" class="btn btn-primary" type="submit" value="Next Page: Confirm Registration">Next Page: Confirm Registration</button>
				</div>
			</form>
		</div>
	</div>
	<script>
	$('#submit_button').click(function() {
		console.log("Button clicked");
		var first_name = $("#first_name").val();
		if (first_name == "") {
			$("#first_name")
		}
		var last_name = $("#last_name").val();
		var street_address = $("#street_address").val();
		var city = $("#city").val();
		var state = $("#state").val();
		var zip = $("#zip").val();
		var email = $("#email").val();
		var phone_number = $("#phone_number").val();
	});
	</script>
	{% endblock %}
{% endblock %}